<!DOCTYPE HTML>
<html>

<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <title>Graph2d | Basic Example</title>

    <style type="text/css">
        body, html {
            font-family: sans-serif;
        }

    </style>

    <script src="../dist/vis.js"></script>
    <script src="./locationTrace_processed.js"></script>
    <script src="./timeTraveled_processed.js"></script>
    <link href="../dist/vis.css" rel="stylesheet" type="text/css" />

<body>
<h2>Graph2d | Basic Example</h2>
<div style="width:700px; font-size:14px; text-align: justify;">

</div>
<br />
<div id="visualization"></div>
<div id="visualization2"></div>
<div id="visualization3"></div>

<script type="text/javascript">
    var groups = new vis.DataSet();
    groups.add({
        id: 'accuracy',
        content: 'accuracy'
        });
//
    groups.add({
        id: 'latitude',
        content: 'latitude'
    })

    groups.add({
        id: 'longitude',
        content: 'longitude'
    })
    groups.add({
        id: 'timeTraveled',
        content: 'timeTraveled',
        options:{
            yAxisOrientation:'right',
            drawPoints:{style:"square", size:10}
        }
    })
    groups.add({
        id: 'db',
        content: 'db',
        options:{
            yAxisOrientation:'right',
            drawPoints:{style:"circle"}
        }
    })


    var items = [];
    var checkItems = [];

    for (var i = 0; i < locationTraceData.length; i++) {
        items.push({x:Number(locationTraceData[i].date+'000'), y:locationTraceData[i].value.accuracy === undefined ? 50 : locationTraceData[i].value.accuracy, group:'accuracy', label: {content:locationTraceData[i].value.event}});
        items.push({x:Number(locationTraceData[i].date+'000'), y:locationTraceData[i].value.latitude === undefined ? -6.8 : locationTraceData[i].value.latitude, group:'latitude'});
        items.push({x:Number(locationTraceData[i].date+'000'), y:locationTraceData[i].value.longitude === undefined ? 107.6 : locationTraceData[i].value.longitude, group:'longitude'});
    }

    for (var i = 0; i < timeTraveledData.length; i++) {
        items.push({x:Number(timeTraveledData[i].date+'000'), y:timeTraveledData[i].value, group:'timeTraveled'});
    }

    var lastValue = 0;
    var timeTraveled = 0;
    var dt = 0;
    var start = Number(locationTraceData[0].date);
    var departed = false;
    for (var i = 0; i < locationTraceData.length; i++) {
        var event = locationTraceData[i].value.event;
        if (event === 'depart') {
            dt = Number(locationTraceData[i].date);
            departed = true;
        }
        else {
            if (departed === true) {
                timeTraveled += Number(locationTraceData[i].date) - dt;
            }
            departed = false;
            dt = 0;
        }
        checkItems.push({x:Number(locationTraceData[i].date+'000'), y:timeTraveled, group:'db'});
    }


    var matchingItems = [];
    for (var i = 0; i < checkItems.length; i++) {
        for (var j = 0; j < items.length; j++) {
            if (items[j].group === 'timeTraveled') {
                if (items[j].x === checkItems[i].x) {
                    console.log("check @ ", checkItems[i].x, items[j].y - checkItems[i].y);
                    matchingItems.push(checkItems[i]);
                    break;
                }
            }
        }
    }

    items = items.concat(checkItems)

    var container = document.getElementById('visualization');

    var dataset = new vis.DataSet(items);
    var options = {
        interpolation:false,
        height:800,
        sort:true
    };
    var graph2d = new vis.Graph2d(container, dataset,groups, options);
</script>
</body>
</html>